import React, { Component } from 'react';

const Hoc1 = (WrappedComponent) => { // 可以抽象name的state和控制方法；
  return class extends Component {

    static displayName = 'Hoc1(tabs)';

    constructor(props) {
      super(props);
      this.state = {
        name: 'Hoc1',
      }
      this.onChange = this.onChange.bind(this);
    }

    proc(wrappedComponentInstance) {
      console.log(wrappedComponentInstance);
      console.log(this);
      wrappedComponentInstance.method();
    }

    componentWillMount() {
      console.log('hoc1 will be mounted');
    }

    componentDidMount() {
      console.log('hoc1 did be mounted');
    }

    componentWillUnmount() {
      console.log('hoc1 will be unmounted');
    }

    onChange(event) {
      console.log(event.target);
    }

    render() {
      const props = Object.assign({}, this.props, {
        ref: this.proc.bind(this),
      })
      const newProps = {
        name: this.state.name,
        onChange: this.onChange
      }
      return (
        <WrappedComponent
          {...props}
          {...newProps}
        />
      );
    }
  }
}

export default Hoc1;
